import React from 'react';
import type { MaskLoadingProps } from '../../types';

/**
 * MaskLoading 遮罩加载组件
 * 
 * 功能特性：
 * - 支持遮罩层覆盖
 * - 可自定义加载文本和图标
 * - 支持动画效果
 * - 可控制显示隐藏
 * - 支持自定义样式
 */
const MaskLoading: React.FC<MaskLoadingProps> = ({
  visible = false,
  children,
  className,
  style,
  loadingText = '加载中...',
  loadingIcon,
}) => {
  // 如果不可见，直接返回子组件
  if (!visible) {
    return <>{children}</>;
  }

  // 蒙层样式 - 直接覆盖父容器
  const maskStyle: React.CSSProperties = {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    width: '100%',
    height: '100%',
    backgroundColor: 'rgba(0, 0, 0, 0.35)',
    opacity: 1,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    zIndex: 2,
    borderRadius: '4px',
    ...style,
  };

  // 加载内容样式
  const loadingContentStyle: React.CSSProperties = {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    width: 'auto',
    color: '#fff',
    wordBreak: 'break-all',
    borderRadius: '12px',
    pointerEvents: 'all',
    fontSize: '16px',
    lineHeight: '1.5',
    boxSizing: 'border-box',
    textAlign: 'center',
    padding: '24px',
  };

  // 旋转器样式
  const spinnerContainerStyle: React.CSSProperties = {
    position: 'relative',
    width: '60px',
    height: '60px',
    marginBottom: '20px',
  };

  // 外圈样式
  const outerCircleStyle: React.CSSProperties = {
    width: '80px',
    height: '80px',
    border: '2px solid rgba(255, 255, 255, 0.15)',
    borderRadius: '50%',
    animation: 'sei-micro-app-pulse 2s ease-in-out infinite',
    position: 'absolute',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
    boxShadow: '0 0 25px rgba(255, 255, 255, 0.3)',
  };

  // 内圈样式
  const innerCircleStyle: React.CSSProperties = {
    width: '40px',
    height: '40px',
    border: '3px solid rgba(255, 255, 255, 0.2)',
    borderTop: '3px solid #ffffff',
    borderRadius: '50%',
    animation: 'sei-micro-app-spin 1.2s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite',
    position: 'absolute',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
    boxShadow: '0 0 15px rgba(255, 255, 255, 0.4)',
  };

  // 文本样式
  const textStyle: React.CSSProperties = {
    color: '#ffffff',
    fontSize: '16px',
    fontWeight: '500',
    textAlign: 'center',
    margin: 0,
    lineHeight: '1.5',
    textShadow: '0 1px 2px rgba(0, 0, 0, 0.8)',
    letterSpacing: '0.3px',
  };

  // 点动画样式
  const dotsStyle: React.CSSProperties = {
    display: 'inline-block',
    animation: 'sei-micro-app-dots 1.5s infinite',
  };

  // 默认loading内容
  const defaultLoadingContent = (
    <div style={loadingContentStyle}>
      {/* CSS动画定义 */}
      <style>
        {`
          @keyframes sei-micro-app-spin {
            0% { transform: translate(-50%, -50%) rotate(0deg); }
            100% { transform: translate(-50%, -50%) rotate(360deg); }
          }
          
          @keyframes sei-micro-app-pulse {
            0%, 100% { 
              transform: translate(-50%, -50%) scale(1);
              opacity: 1;
            }
            50% { 
              transform: translate(-50%, -50%) scale(1.1);
              opacity: 0.7;
            }
          }
          
          @keyframes sei-micro-app-dots {
            0%, 20% { content: ''; }
            40% { content: '.'; }
            60% { content: '..'; }
            80%, 100% { content: '...'; }
          }
        `}
      </style>
      
      {/* 旋转器 */}
      <div style={spinnerContainerStyle}>
        <div style={outerCircleStyle} />
        <div style={innerCircleStyle} />
      </div>
      
      {/* 加载文本 */}
      <p style={textStyle}>
        {loadingText}
        <span style={dotsStyle} />
      </p>
      
      {/* 自定义图标 */}
      {loadingIcon && (
        <div style={{ marginTop: '10px' }}>
          {loadingIcon}
        </div>
      )}
    </div>
  );

  return (
    <>
      {children}
      <div className={className} style={maskStyle}>
        {defaultLoadingContent}
      </div>
    </>
  );
};

export default MaskLoading;